<template>
  <view class="order-manage">
    <text class="page-title">订单管理</text>
    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="order in orderList" 
        :key="order.id"
      >
        <text class="order-id">订单号：{{ order.id }}</text>
        <text class="order-amount">金额：￥{{ order.amount.toFixed(2) }}</text>
        <text 
          class="order-status" 
          :style="{ color: order.statusColor }"
        >
          {{ order.status }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import api from '@/api';

// ------------------------------ 类型定义 ------------------------------
/** 订单项数据结构 */
interface OrderItem {
  id: string;         // 订单号
  amount: number;     // 订单金额
  status: string;     // 订单状态
  statusColor: string;// 状态对应的颜色
}

// ------------------------------ 响应式数据 ------------------------------
/** 订单列表（响应式数组） */
const orderList = reactive<OrderItem[]>([
  { 
    id: '20240815001', 
    amount: 99.99, 
    status: '已完成', 
    statusColor: '#2ecc71' 
  },
  { 
    id: '20240815002', 
    amount: 199.99, 
    status: '待支付', 
    statusColor: '#e74c3c' 
  },
  { 
    id: '20240815003', 
    amount: 59.99, 
    status: '已发货', 
    statusColor: '#3498db' 
  }
]);
// 获取首页菜单
	const getMenu = async () => {
	  try {
	    // 直接调用 this.$api.loginApi（await 等待请求完成）
	    const res = await api.adminAdvert({module: 'adv'});
		console.log(res)
	  } catch (error: any) {
	    // 处理错误（比如账号密码错、网络问题）
	    uni.showToast({ title: error.message, icon: 'none' });
	  }
	};
// ------------------------------ 生命周期 ------------------------------
/** 页面加载时执行 */
onMounted(() => {
  console.log('订单管理页加载，当前导航 ID：order');
  getMenu()
});
</script>

<style scoped>
.order-manage {
  height: 100%;
  padding: 24px; /* 可选：增加内边距避免内容贴边 */
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #2c3e50;
}

.order-list {
  display: grid;
  gap: 16px;
}

.order-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 可选：增加轻微阴影提升层次感 */
}

.order-id {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.order-amount {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: 500; /* 可选：金额加粗 */
}

.order-status {
  font-size: 14px;
  font-weight: bold;
}
</style>